<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <!-- 冒泡案例 -->
    <!-- 元素->body->document->window -->
    <!-- 三个父子关系的div,然后分别加了点击事件，
    当我们在div3里面点击的时候，会发现弹出了一次3，接着又弹出了2，最后又弹出了1，
    这说明点击的时候，不仅div3的事件被触发了，它的父级div2 与div1的点击事件也触发了，这种现象就叫做冒泡。 -->
    <h3>事件冒泡场景</h3>
    <div id="div1">
        div1
        <div id="div2">
            div2
            <div id="div3">
                div3
            </div>
        </div>
    </div>
    <h3>事件委托</h3>
    <ul id="ulbox">
        <li class="oli">aa</li>
        <li class="oli">bb</li>
        <li class="oli">cc</li>
        <li class="oli">dd</li>
        <li class="oli">ee</li>
    </ul>
</body>
<script>
    // 事件委托:子元素的事情交给父元素去做，事件只用写给父元素即可
    $("#ulbox").click(function(ev) {
        var e = ev || window.event;
        var target = e.target || e.srcElement
            // 为了防止nodeName在不同浏览器获取的字母大小写不同
        if (target.nodeName.toLowerCase() == 'li') {
            target.style.backgroundColor = "yellow";
            // target.siblings().style.backgroundColor="red";
            alert(target.innerHTML);
        }
    })
</script>

</html>